﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ECharts</title>
    <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
</head>
<body style="margin:0 0 0 0">
    <div id="charts" style="width:99%;height:130px;"></div>
    <div style="width:100%;text-align:center;color:#ff7f50; font-weight:bold; font-size:12px; margin-top:5px;">@ViewBag.title</div>
    <script src="~/Scripts/echarts.min.js"></script>
    <script type="text/javascript">
        option = {
            series: [
                {
                    name: '@ViewBag.title',
                    type: 'gauge',
                    radius: '100%',
                    splitNumber: 5,   
                    min: @Html.Raw(ViewBag.min),
                    max: @Html.Raw(ViewBag.max),
                    title: {
                        show: false
                    },
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], 
                            width: 5
                        }
                    },
                    axisTick: {    
                        // 坐标轴小标记
                        splitNumber: 10,   // 每份split细分多少段 
                        length: 8,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        },
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 10,
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 12,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    detail: { formatter: '{value}',offsetCenter: [0, '72%'], },
                    data: [{ value: @Html.Raw(ViewBag.value), name: '' }]
                }
            ]
        };

        $(function () {
            myChart = echarts.init(document.getElementById('charts'));
            myChart.setOption(option, true);

            //parent.CanLoadGaugeData();
        })

        function ReloadGaugeValue(value){
            option.series[0].data[0].value = value;
            myChart.setOption(option, true);
        }
    </script>
</body>
</html>
